<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>React</title>
		<link rel="icon" href="https://reactjs.org/logo-180x180.png">
		<link rel="stylesheet" href="index.css">
		<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
		<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
		<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
	</head>
	<body>
		<div id="root"></div>
		<script type="text/babel">
			class Box extends React.Component {
			render() {
				return (
					<div className='box'>
						<div className="card">
							<div className="card-image">
								<img v-if="!started" src="disCard.imageUrl"></img>
								<img v-if="started" v-for="item,index in makers"
									src="index == makers.length - 1 && !ended ? disCard.imageUrl : item.imageUrl"></img>
							</div>
							<div className="card-btn">
								<button className="btn" disabled="started && !ended" onClick="start">开始发牌</button>
								<button className="btn" disabled="ended" v-if="started" onClick="add">加牌</button>
								<button className="btn" disabled="ended" v-if="started" onClick="lose">认输</button>
								<button className="btn" disabled="ended" v-if="started" onClick="end">结束</button>
							</div>
						</div>
						<div className="free-card">
							<div className="card-image" v-if="started">
								<img v-for="item,index in freeCard" src="item.imageUrl"></img>
							</div>
							
							<div class="total" v-if="freeTotal">合计：</div>
						</div>
					</div>
				)
			}
		}
		
		
        const element = <h1>hello world</h1>
        const root = ReactDOM.createRoot(document.getElementById("root"))
        root.render(<Box />)
    </script>
	</body>
</html>
